<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>用户中心</title>

		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href=" ./css/sm.min.css">
		<link rel="stylesheet" href=" ./css/sm-extend.min.css">
		<link rel="stylesheet" href=" ./css/iconfont.css">
		<script src='js/vue.js'></script>
		<script src='js/axios.min.js'></script>
		<style type="text/css">
			/* 顶部大框架 */
			#user-top{
				background-color: rgb(22,130,176);
				height:10rem;
				padding-top: 8%;
			}
			/* 中间照片调整 */
			#top-img{
				margin-left: 35%;
				/* margin-top: 10%; */
				width: 5.3rem;
				height: 8rem;
				/* background-color: #55ffff; */
			}
			#top-img-1{
				width: 100%;
				height: 66.2%;
				border: 0.2rem solid rgb(255, 255, 255);
				border-radius: 50%;
				overflow: hidden;
			}
			#top-img-1 img{
				width: 100%;
				height: 100%;
			}
			#top-img-2{
				width: 100%;
				height: 33.8%;
				text-align: center;
				line-height: 2.4rem;
				font-size: 0.9rem;
				font-family: "宋体";
				font-weight: 700;
				color: white;
			}
			/* 信息样式调整 */
			.card .col-20{
				text-align: center;
			}
			.card .col-80{
				padding-left: 0.5rem;
			}
			.card .col-75{
				padding-left: 0.5rem;
			}
			/* 返回主页面 */
			#returnIndex{
				position: absolute;
				left: 0.5rem;
				top: 0.3rem;
				font-size: 0.9rem;
				font-weight: 700;
				color: white;
			}
			/* 标签消除间距 */
			.card{
				margin: 0;
			}
			/* 资料修改页面照片调整 */
			#alterImg img{
				height: 4rem;
				width: 4rem;
				border-radius: 2rem;
			}
			/* 图片切换 */
			#alterImg1{
				    position: absolute;
				    opacity: 0;
				    width: 100%;
				    height: 100%;
			}
			
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div id="page">
			<div class="page">
				<!-- 这里是页面内容区 -->
				<div class="content">
					<div id="returnIndex">
						<span @click="returns()" class="close-popup iconfont icon-fanhui"></span>
					</div>
					<div id="user-top" v-if="user!=null">
						<div id="top-img">
							<div id="top-img-1">
								<img :src="imgSrc(user.photo)" >
							</div>
							<div id="top-img-2">
								{{user.name}}
							</div>
						</div>
					</div>
					<div id="user-content">
						
						
						  <div class="list-block cards-list" style="margin: 0;">
							  <ul>
								<li class="card" style="margin-top: 0;" v-if="user!=null">
									  <div class="card-header row">
										<div class="col-20">昵称</div>
										<div class="col-80">{{user.nickname}}</div>
									  </div>
									  <div class="card-header row">
										<div class="col-20">社区</div>
										<div v-if="forumForum!=null" class="col-80">{{forumForum.name}}</div>
										<div v-else class="col-80">尚未认证...</div>
										</div>
									  <div class="card-header row">
										  <div class="col-20">手机</div>
										  <div class="col-80">{{user.phone}}</div>
									  </div>
									  <div class="card-header row">
										  <div class="col-20">邮箱</div>
										  <div class="col-80">{{user.email}}</div>
									  </div>
									  <div class="card-header row">
										  <div class="col-20">简介</div>
										  <div class="col-80" style="height: 3rem; font-size: 0.7rem;">{{user.intro}}</div>
									  </div>
									  <!-- <div class="card-header row">
										  <div class="col-20">名称</div>
										  <div class="col-80">内容</div>
									  </div>
									<div class="card-header row">
										<div class="col-20">名称</div>
										<div class="col-80">内容</div>
									</div> -->
								</li>
								 <li class="card">
									 <div class="card-header row">
										  <div class="col-20">
											  <!-- <span class="iconfont icon-icon_namecard"></span> -->
											  夜间
										  </div>
										  <div class="col-75"><!-- @click="forumAttestation() -->
											<div class="item-input">
												  <label class="label-switch">
													<input v-model="type" type="checkbox">
													<div class="checkbox"></div>
												  </label>
												</div>
										  </div>
										  <div class="col-15">
											  <!-- <span class="iconfont icon-qianjin"></span> -->
										  </div>
									 </div>
									  <div class="card-header row">
										  <div class="col-20">
											  <span class="iconfont icon-chuangzuo"></span>
										  </div>
										  <div class="col-75 open-popup" data-popup=".popup-userMes">
											修改个人资料
										  </div>
										  <div class="col-15">
											  <span class="iconfont icon-qianjin"></span>
										  </div>
									  </div>
									  <div class="card-header row">
										  <div class="col-20">
											  <span class="iconfont icon-yuechi"></span>
										  </div>
										  <div class="col-75 open-popup" data-popup=".popup-alterPass">
											修改密码
										   </div>
										   <div class="col-15">
											   <span class="iconfont icon-qianjin"></span>
										   </div>
									  </div>
									  
									  <div class="card-header row" id="logout">
										  <div class="col-20">
											  <span class="iconfont icon-zhuxiao"></span>
										  </div>
										  <div class="col-80" style="color: red;">
											注销
										  </div>
										   <div class="col-15"></div>
									  </div>
								 </li>
							  </ul>
							</div>
							
							
					</div>
				</div>
				
			</div>
			
			<!-- Popup -->
			<!-- 修改个人资料 -->
			<div class="popup popup-userMes">
				<div class="content-block" style="margin-top: 0.5rem;">
					<!-- 工具栏 -->
					<div class="inform-top row">
						<div class="t1 col-40">
							<span class="close-popup iconfont icon-fanhui"></span>
						</div>
						<div class="t2 col-33">
							<span id="informName">信息修改</span>
						</div>
					</div>
					<!-- 输入区域 -->
					<div id="report-count" class="item-content list-block">
						
						<ul v-if="user!=null">
						      <!-- Text inputs -->
							  <li>
							    <div class="item-content">
							      <div class="item-media"><i class="icon icon-form-name"></i></div>
							      <div class="item-inner">
									<div class="item-title label">头像</div>
							        <div class="item-input" id="alterImg">
										<form id="imgForm" method="post" enctype="multipart/form-data">
										  	<input id="alterImg1" name="img" type="file" @change="addImgMethod" accept="image/jpeg" />
										  </form>
										<img :src="imgSrc(img)">
									</div>
							      </div>
							    </div>
							  </li>
							  <form id="userMesForm">
						      <li>
						        <div class="item-content">
						          <div class="item-media"><i class="icon icon-form-name"></i></div>
						          <div class="item-inner">
						            <div class="item-title label">昵称</div>
						            <div class="item-input">
						              <input maxlength="8" id="nickname" name="nickname" :value="user.nickname" type="text" placeholder="Your name">
						            </div>
						          </div>
						        </div>
						      </li>
							  <li>
							    <div class="item-content">
							      <div class="item-media"><i class="icon icon-form-name"></i></div>
							      <div class="item-inner">
							        <div class="item-title label">手机</div>
							        <div class="item-input">
							          <input maxlength="11" id="phone" name="phone" :value="user.phone" type="number" placeholder="Your phone">
							        </div>
							      </div>
							    </div>
							  </li>
						      <li>
						        <div class="item-content">
						          <div class="item-media"><i class="icon icon-form-email"></i></div>
						          <div class="item-inner">
						            <div class="item-title label">邮箱</div>
						            <div class="item-input">
						              <input maxlength="50" id="email" name="email" :value="user.email" type="email" placeholder="E-mail">
						            </div>
						          </div>
						        </div>
						      </li>
						      <li class="align-top">
						        <div class="item-content">
						          <div class="item-media"><i class="icon icon-form-comment"></i></div>
						          <div class="item-inner">
						            <div class="item-title label">简介</div>
						            <div class="item-input">
						              <textarea maxlength="50" name="intro" style="font-size: 0.7rem;" :value="user.intro"></textarea>
						            </div>
						          </div>
						        </div>
						      </li>
							</form>
						    </ul>
							
					</div>
					 <p><a @click="userMesSubmit()" href="#" class="button button-big button-round">保存</a></p>
				</div>
			</div>
			<!-- 社区认证 -->
			<div class="popup popup-attestation">
				<div class="content-block" style="margin-top: 0.5rem;">
					<!-- 工具栏 -->
					<div class="inform-top row">
						<div class="t1 col-40">
							<span class="close-popup iconfont icon-fanhui"></span>
						</div>
						<div class="t2 col-33">
							<span id="informName">认证社区</span>
						</div>
					</div>
					<!-- 输入区域 -->
					<div id="report-count" class="item-content list-block">
						
						
					</div>
					 <p><a onclick="" href="#" class="button button-big button-round">认证</a></p>
				</div>
			</div>
			<!-- 修改密码 -->
			<div class="popup popup-alterPass">
				<div class="content-block" style="margin-top: 0.5rem;">
					<!-- 工具栏 -->
					<div class="inform-top row">
						<div class="t1 col-40">
							<span class="close-popup iconfont icon-fanhui"></span>
						</div>
						<div class="t2 col-33">
							<span id="informName">修改密码</span>
						</div>
					</div>
					<!-- 输入区域 -->
					<div id="report-count" class="item-content list-block">
						<ul v-if="user!=null">
						     
							  <form id="">
						      <li>
						        <div class="item-content">
						          <div class="item-media"><i class="icon icon-form-name"></i></div>
						          <div class="item-inner">
						            <div class="item-title label">原始密码</div>
						            <div class="item-input">
						              <input maxlength="16" id="orderpass" name="orderpass"  type="password" placeholder="password">
						            </div>
						          </div>
						        </div>
						      </li>
							  <li>
							    <div class="item-content">
							      <div class="item-media"><i class="icon icon-form-name"></i></div>
							      <div class="item-inner">
							        <div class="item-title label">新密码</div>
							        <div class="item-input">
							          <input maxlength="16" id="newpass" name="newpass"  type="password" placeholder="新密码">
							        </div>
							      </div>
							    </div>
							  </li>
							  <li>
							    <div class="item-content">
							      <div class="item-media"><i class="icon icon-form-name"></i></div>
							      <div class="item-inner">
							        <div class="item-title label">新密码</div>
							        <div class="item-input">
							          <input maxlength="16" id="repect" name=""  type="password" placeholder="再次输入">
							        </div>
							      </div>
							    </div>
							  </li>
							 
							</form>
						    </ul>
						
					</div>
					 <p><a @click="alterPass()" href="#" class="button button-big button-round">修改</a></p>
				</div>
			</div>
		</div>
		<script src='./js/jquery-3.2.1.min.js'></script>
		<script src='./js/sm.js'></script>
		<script src='./js/sm-extend.js'></script>
		<script src="./js/config.js"></script>
		<!-- <script type="text/javascript">
			var checkResult=false;
			function chechpass(){
				var password=$("#orderpass").val();
				//验证原始密码
				if(password.length>16||password.length<8){
					$.toast("密码长度 8-16位！");
					checkResult=false;
					return;
				}
				//异步请求
				$.ajax({
					type: 'get',
					url: serviceIP+"/auth/checkPass",
					dataType: 'json',
						data:{
							password: password
						},
					headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
					success:function (data) {
						
					},
				});
			}
		</script> -->
		<script type="text/javascript">
			var app = new Vue({
				el: "#page",
				data: {
					user: null,
					forumForum:null,
					img: "",
					type:null
				},
				created() {
					axios.get(serviceIP+"/forum/userMes",{headers:{"token":token,"refreshtoken":refreshtoken}}).then(result => {
						this.user = result.data.centerUser;
						this.img = result.data.centerUser.photo;
						this.forumForum = result.data.forumForum;
					});
					//判断模式
					if(pattern=="true"){
						this.type=true;
					}
				},
				methods: {
					/* 头像 */
					imgSrc: function(src) {
						return src;
					},
					/* 密码修改 */
					alterPass: function() {
						//var 
						var password=$("#orderpass").val();
						var newpass=$("#newpass").val();
						var repect=$("#repect").val();
						if(password.length>16||password.length<8){
							$.toast("原始密码长度 8-16位！");
							return;
						}else if(newpass.length>16||newpass.length<8){
							$.toast("新密码长度 8-16位！");
							return;
						}else if(newpass!=repect){
							$.toast("两次密码输入不一致");
							return;
						}else{
							axios.get(serviceIP+"/auth/alterPass", {
								params: {
									password: password,
									newpass: newpass
								},
								headers:{"token":token,"refreshtoken":refreshtoken}
							}).then(result => {
								console.log(result);
								$.toast(result.data.mes);
								if(result.data.status==1){
									$("#orderpass").val("");
									$("#newpass").val("");
									$("#repect").val("");
									//关闭弹窗
									$.closeModal(".popup-alterPass");
								}
							});
						}
					},
					/* 社区认证 */
					forumAttestation: function() {
						if(this.forumForum==null){
							//调取弹窗认证
							$.popup(".popup-attestation");
						}else{
							$.toast("已认证！");
						}
					},
					/* 添加照片 */
					addImgMethod: function() {
						var that = this;
						$.ajax({
							url: serviceIP+"/forum/addImg",
							type: "post",
							dataType: "json",
							cache: false,
							data: new FormData($("#imgForm")[0]),
							headers: {
										"token":token,
										"refreshtoken":refreshtoken
									},
							processData: false, // 不处理数据
							contentType: false, // 不设置内容类型
							success: function(data) {
								that.img=data.url;
							}
						});
					},
					/* 用户资料修改保存 */
					userMesSubmit:function() {
						var data=$("#userMesForm").serialize()+"&photo="+this.img;
						if(checkUserMes()){
							that=this;
							$.ajax({
								type: 'get',
								url: serviceIP+"/forum/userMesSubmit",
								dataType: 'json',
									data:data,
								headers: {
										"token":token,
										"refreshtoken":refreshtoken
									},
								success:function (data) {
									console.log(data);
									if(data.status==1){
										$.toast("已保存！");
										//刷新基本信息
										axios.get(serviceIP+"/forum/userMes",{headers:{"token":token,"refreshtoken":refreshtoken}}).then(result => {
											that.user = result.data.centerUser;
											that.img = result.data.centerUser.photo;
											that.forumForum = result.data.forumForum;
										});
										//关闭弹窗
										$.closeModal(".popup-userMes");
									}else{
										$.toast(data.mes);
									}
								}});
						}
						
					},
					//返回
					returns: function() {
						//window.history.go(-1);
						location.href = "main-index.html";
					}
				},
				watch:{
					type(newVal,oldVal){
						if(newVal){
							storage.setItem("nightType",'true');
							$("body").attr("class","theme-dark");
						}else{
							storage.setItem("nightType",'false');
							$("body").attr("class","");
						}
						/* alert(storage.getItem("nightType")); */
					}
				}
				
			});
		</script>
		<script type="text/javascript">
			/* 信息修改表单验证 */
			function checkUserMes(){
				var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				if($("#nickname").val().trim().length ==0){
					$.toast("请输入昵称！");
					return false;
				}else if($("#phone").val().length !=11){
					$.toast("手机号应为11位！");
					return false;
				}else if(!reg.test($("#email").val())){
					$.toast("请输入正确的邮箱！");
					return false;
				}
				return true;
			}
			/* 用户退出 */
		  $(document).on('click','#logout', function () {
			  $.confirm('要退出登录么?', function () {
				 $.ajax({
				  	type: 'get',
				  	url: serviceIP+"/auth/lgout",
				  	dataType: 'json',
				  	headers: {
				  		"token":token,
				  		"refreshtoken":refreshtoken
				  	},
				  	success:function (data) {
				  		console.log(data);
				  		if(data.status==1){
				  			//跳转初始页面
				  			location.href="index.html";
				  		}else{
				  			$.toast("系统维护中，请稍后再试！");
				  		}
				  	}});
					
			  });
		  });

		</script>
		<script>
			$.init();
		</script>
	</body>

</html>
